<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
    <canvas style="border: 2px solid #c3c3c3" id="haha" height="300" width="300"></canvas>
    <button id="detect">识别</button>
    <div id="233">结果:</div>
    <script>
        var flag = false;
        let x = 0, y = 0;
        let cas = document.getElementById('haha');
        cas.onmousedown = (e)=>{
            flag = true
            x = e.offsetX
            y = e.offsetY
        }
        cas.onmousemove = (e)=>{
            nx = e.offsetX
            ny = e.offsetY
            if(flag){
                let c = document.getElementById('haha').getContext("2d");
                c.lineWidth = 8;
                c.moveTo(x, y)
                c.lineTo(nx, ny)
                x = nx
                y = ny;
                c.stroke();
            }
        }
        cas.onmouseup = (e)=>{
            flag = false
        }
        $("#detect").click(()=>{
            let c = document.getElementById('haha')
            let url = c.toDataURL('image/png');
            console.log(url)
            $.post('/catch',
            {
                id:url
            },
            (d,s) => {
                $('#233').html('结果:'+d);
            }
            )
        });
    </script>
</body>

</html>